<template>
  <div>
    <el-form class="storeheader" :inline="true">
      <el-form-item label="上架状态">
        <el-select class="select" placeholder="请选择">
          <el-option label="已上架" value="1"></el-option>
          <el-option label="已下架" value="0"></el-option>
          <el-option label="未上架" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品类型">
        <el-select class="select" placeholder="请选择">
          <el-option label="课程" value="1"></el-option>
          <el-option label="图书" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="name" placeholder="请输入关键字"></el-input>
      </el-form-item>
      <div class="block">
        <span class="demonstration">更新时间</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <el-button class="storebutton">搜索</el-button>
      <el-button class="storebutton">重置</el-button>
    </el-form>
    <el-button type="primary" @click="open">新增商品</el-button>
    <el-table
      border
      ref="multipleTable"
      :data="integral"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="100"> </el-table-column>
      <el-table-column label="商品名称" width="300">
        <template slot-scope="scope"
          ><img :src="scope.row.cover_img" alt="" />
          {{ scope.row.name }}</template
        >
      </el-table-column>

      <el-table-column prop="sales_num" label="已兑换" width="153">
      </el-table-column>
      <el-table-column prop="book_status" label="剩余库存" width="150">
      </el-table-column>
      <el-table-column prop="address" label="上架状态" width="100">
      </el-table-column>
      <el-table-column prop="nickname" label="创建人" width="100">
      </el-table-column>
      <el-table-column label="更新时间" width="150">
        <template slot-scope="scope">
          {{ scope.row.updated_at | formatDate }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="150">
        <el-link>排序</el-link>- <el-link>编辑</el-link>-
        <el-link>删除</el-link>
      </el-table-column>
    </el-table>

    <!-- <div class="storebox" v-show="storebox">
      <div class="popshow"><span class="del">X</span></div>
    </div> -->
  </div>
</template>
<script>
import { getintegral } from '../../api/api4'
export default {
  data() {
    return {
      name: '',
      value1: '',
      integral: [],
      storebox: false,
      centerDialogVisible: false

    }
  },
  created() {
    getintegral().then((res) => {
      console.log(res)
      if (res) {
        this.integral = res.data.list
      }
    })
  },

  methods: {
    open() {
      this.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定'

      })
    },
    handleSelectionChange() {},
    add() {
      this.storebox = true
    }
  }
}
</script>
<style lang="scss">
.storebox {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  // position: relative;
  .popshow {
    width: 500px;
    height: 300px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .del {
      position: absolute;
      right: 20px;
      top: 20px;
    }
  }
}
.storeheader {
  width: 100%;
  display: inline-flex;
  justify-content: space-around;

  .select {
    width: 150px;
  }
  .storebutton {
    height: 40px;
  }
}
img {
  width: 30px;
  height: 30px;
}
</style>
